<template>
  <div class="app-container">
    <div class="operation-container">
      <el-button class="filter-item" type="primary" round icon="el-icon-edit" @click="handleCreate">
        添加
      </el-button>
    </div>
    <div class="operation-container">
      <el-table
        ref="dictTable"
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        row-key="id"
        fit
        stripe
        highlight-current-row
      >
        <el-table-column label="模板">
          <template slot-scope="column">
            <el-form
              ref="dataForm"
              label-width="100px"
            >
              <el-form-item label="名称" prop="name">
                <el-input v-model="column.row.name" placeholder="请输入名称" />
              </el-form-item>
              <el-form-item prop="content">
                <el-input v-model="column.row.content" class="template" :autosize="{minRows: 25, maxRows: 40}" show-word-limit type="textarea" placeholder="请输入模板内容" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm(column.row)">
                确认修改
              </el-button>
              <el-button type="danger" @click="handleDelete(column.row)">
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="字段说明" width="300">
          <p><span class="data-info">${environment}</span> 更新环境</p>
          <p><span class="data-info">${updateSystem}</span> 更新系统</p>
          <p><span class="data-info">${content}</span> 更新内容</p>
          <p><span class="data-info">${risk}</span> 风险等级</p>
          <p><span class="data-info">${affectSystem}</span> 受影响系统</p>
          <p><span class="data-info">${mode}</span> 更新方式</p>
          <p><span class="data-info">${onlineTime}</span> 更新时间</p>
          <p><span class="data-info">${duration}</span> 更新时长</p>
          <p><span class="data-info">${updateUser}</span> 更新人员</p>
          <p><span class="data-info">${noticeUser}</span> 通知人员</p>
          <p><span class="data-info">${feedback}</span> 反馈时间</p>
          <p><span class="data-info">${url}</span> 详情连接</p>
          <p><span class="data-info">${dataChanged}</span> 数据库结构是否已变动</p>
          <p><span class="data-info">${dateUser}</span> 数据库变动通知人员</p>
          <p><span class="data-info">${tellUser}</span> 手机号通知人员</p>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增编辑群组 -->
    <el-dialog :title="textMap[dialogStatus]" width="1000px" append-to-body :visible.sync="dialog">
      <el-form
        ref="dataForm"
        label-width="100px"
        :model="template"
        :rules="rules"
      >
        <el-row>
          <el-col :span="16">
            <el-form-item label="群名称" prop="name">
              <el-input v-model="template.name" />
            </el-form-item>
            <el-form-item label="模板" prop="content">
              <el-input v-model="template.content" class="template" :autosize="{minRows: 25, maxRows: 40}" show-word-limit type="textarea" placeholder="请输入模板内容" />
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="7">
            <p><span class="data-info">${environment}</span> 更新环境</p>
            <p><span class="data-info">${updateSystem}</span> 更新系统</p>
            <p><span class="data-info">${content}</span> 更新内容</p>
            <p><span class="data-info">${risk}</span> 风险等级</p>
            <p><span class="data-info">${affectSystem}</span> 受影响系统</p>
            <p><span class="data-info">${mode}</span> 更新方式</p>
            <p><span class="data-info">${onlineTime}</span> 更新时间</p>
            <p><span class="data-info">${duration}</span> 更新时长</p>
            <p><span class="data-info">${updateUser}</span> 更新人员</p>
            <p><span class="data-info">${noticeUser}</span> 通知人员</p>
            <p><span class="data-info">${feedback}</span> 反馈时间</p>
            <p><span class="data-info">${url}</span> 详情连接</p>
            <p><span class="data-info">${dataChanged}</span> 数据库结构是否已变动</p>
            <p><span class="data-info">${dateUser}</span> 数据库变动通知人员</p>
            <p><span class="data-info">${tellUser}</span> 手机号通知人员</p>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">
          取消
        </el-button>
        <el-button type="primary" @click="submitForm">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { templateFetchList, deletes, create, update } from '@/api/data/template'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      tableKey: 0,
      dialog: false,
      dialogStatus: undefined,
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        pageNumber: 1,
        pageSize: 10
      },
      textMap: {
        update: '修改群组',
        create: '添加群组'
      },
      template: {
        id: undefined,
        name: undefined,
        content: undefined
      },
      rules: {
        name: [
          { required: true, trigger: 'blur', message: '模板名称不能为空' }
        ],
        content: [
          { required: true, trigger: 'blur', message: '模板内容不能为空' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'dict'
    ])
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      templateFetchList(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0.2 * 1000)
      })
    },
    // 创建事件
    handleCreate() {
      this.resetFields()
      this.dialog = true
      this.dialogStatus = 'create'
    },
    // 修改事件
    handleUpdate(row) {
      this.resetFields()
      this.group = Object.assign({}, row) // copy obj
      this.dialog = true
      this.dialogStatus = 'update'
    },
    // 删除事件
    handleDelete(row) {
      deletes(row.id).then(() => {
        this.getList()
        this.$notify({
          title: '删除成功！',
          type: 'success',
          duration: 2000
        })
      })
    },
    submitForm(row) {
      if (row.id) {
        update(row.id, row).then(() => {
          this.dialog = false
          this.getList()
          this.$notify({
            title: '修改成功！',
            type: 'success',
            duration: 2000
          })
        })
      } else {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            create(this.template).then(() => {
              this.dialog = false
              this.getList()
              this.$notify({
                title: '新增成功！',
                type: 'success',
                duration: 2000
              })
            })
          }
        })
      }
    },
    resetFields() {
      this.template = {
        id: undefined,
        name: undefined,
        content: undefined
      }
      if (this.$refs['dataForm'] !== undefined) {
        this.$refs['dataForm'].resetFields()
      }
    }
  }
}
</script>
<style scoped>
.template>>>textarea{
  color: white!important;
  background-color: black!important;
}
.dialog-footer{
  text-align: center;
}
.data-info{
  font-weight: 800
}
</style>
